<template>
  <div>
    <!-- 普通展示 -->
    <div class="head_styl" v-show="!isCeiling">
      <div class="head_top">
        <img @click="toPageFun('/')" class="img_styl" src="@/assets/images/fronLogo.png" alt sizes srcset />
        <div class="head_right">
          <div class="tabs_styl">
            <div v-for="(item, index) in tabsList" :key="index" class="tabs_item" :class="[0 == item.index ? 'choose_item' : '']">{{ item.name }}</div>
          </div>
          <div class="search_styl">
            <div class="input_styl">
              <div class="input_border">
                <Input v-model="searchInput" placeholder="请输入要搜索的商品名称" style="height: 40px" />
              </div>
              <div class="input_search" @click="searchGoodsFun">
                <Icons font="#icon-ss" class="icon-ss" fontSize="16px"></Icons>
                <div>搜索</div>
              </div>
            </div>
            <div class="buy_styl" @click="toPageFun('/personalCenter/user')">
              <Icons font="#icon-gwzx" class="icon-gwzx" fontSize="16px"></Icons>
              <div>个人中心</div>
            </div>
          </div>
          <div class="history_styl">
            <div v-for="(item, index) in store_goodsInfo" :key="index">
              <div @click="toProductFun(item)" v-if="index == 0" class="history_item1">
                {{ item.storeName }}
                <Icons font="#icon-ho" class="icon-ho" fontSize="16px"></Icons>
              </div>
              <div @click="toProductFun(item)" v-else class="history_item">{{ item.storeName }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="head_bottom">
        <div class="shop_class">
          <div class="shop_item" :class="[$route.path.includes(item.path) ? 'choose_shopitem' : '']"
            @click="clickMenuFun(item, index)" v-for="(item, index) in menuList" :key="index">{{ item.name }}</div>
        </div>
      </div> -->
      <div class="navbar">
        <div class="navbar_slider" ref="nav_slider" v-show="activeIndex != null"></div>
        <div class="bavbar_content">
          <div
            class="bavbar_item"
            v-for="(item, index) of menuList"
            :style="{
              color: activeIndex == index ? 'white' : 'black'
            }"
            :key="index"
            @click="clickMenuFun(item, index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <!-- 吸顶展示 -->
    <div class="head_stylCeiling" v-show="isCeiling">
      <img @click="toPageFun('/')" class="img_styl" src="@/assets/images/fronLogo.png" alt sizes srcset />
      <div class="menu_styl">
        <div class="menu_item" :class="[$route.path.includes(item.path) ? 'chooseClass' : '']" v-for="(item, index) in menuList" :key="index" @click="clickMenuFun(item, index)">
          {{ item.name }}
        </div>
      </div>
      <div class="btn_styl">
        <div class="btn_search" @click="toPageFun('/product')"><Icons font="#icon-ss" class="icon-ss" fontSize="16px"></Icons>搜索</div>
        <div class="btn_user" @click="toPageFun('/personalCenter/user')"><Icons font="#icon-gwzx" class="icon-gwzx" fontSize="16px"></Icons>个人中心</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Front-Search",
  props: {
    isCeiling: {
      default: false,
      type: Boolean
    }
  },
  watch: {
    $route: {
      handler(newVal) {
        console.log("newValue", newVal.path);
        let nowPath = newVal.path;
        let navIndex = this.menuList.findIndex((menu) => {
          return menu.path == "/" + nowPath.split("/")[1];
        });
        if (navIndex != -1) {
          this.activeIndex = navIndex;
          this.$refs.nav_slider.style.left = navIndex * 166 + "px";
          return;
        }
        this.activeIndex = null;
      },
      deep: true
    }
  },
  data() {
    return {
      searchInput: "",
      menuList: [
        {
          id: 0,
          name: "首页",
          path: "/front"
        },
        {
          id: 1,
          name: "产品大厅",
          path: "/product"
        },
        {
          id: 2,
          name: "竞拍专区",
          path: "/bidding"
        },
        {
          id: 3,
          name: "资讯专区",
          path: "/news"
        },
        {
          id: 4,
          name: "企业公告",
          path: "/notice"
        }
      ],
      activeIndex: 0, // 当前页面的导航栏下标
      tabsList: [
        {
          index: 0,
          name: "商品"
        }
      ]
    };
  },
  computed: {
    ...mapGetters(["store_goodsInfo"])
  },
  mounted() {
    this.initNavbarFun();
  },
  methods: {
    // 初始化导航栏选中项
    initNavbarFun() {
      let newPath = this.$route.path;
      let navIndex = this.menuList.findIndex((menu) => {
        return menu.path == "/" + newPath.split("/")[1];
      });
      if (navIndex != -1) {
        this.activeIndex = navIndex;
        this.$refs.nav_slider.style.left = navIndex * 166 + "px";
        return;
      }
      this.activeIndex = null;
    },
    toProductFun(item) {
      this.$router.push({
        path: "/product/product-detail",
        query: {
          id: item.storeNameId
        }
      });
    },
    toPageFun(path) {
      this.$router.push(path);
    },
    clickMenuFun(item, index) {
      console.log("router");
      this.$router
        .push(item.path)
        .then((res) => {
          console.log("路由成功",res);
          this.activeIndex = index;
          this.$refs.nav_slider.style.transition = "left 0.2s ease";
          this.$refs.nav_slider.style.left = index * 166 + "px";
        })
        .catch((err) => {
          console.log("err", err);
          this.activeIndex = 0;
          this.$refs.nav_slider.style.transition = "left 0.2s ease";
          this.$refs.nav_slider.style.left = 0 * 166 + "px";
        });
    },
    searchGoodsFun() {
      if (this.$route.path != "/product") {
        this.$router.push({
          name: "product",
          params: {
            searchInfo: this.searchInput
          }
        });
      } else {
        this.$Bus.$emit("search", { searchInfo: this.searchInput });
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";

.img_styl {
  cursor: pointer;
  height: 80px;
}

.head_stylCeiling {
  .flex-x();
  position: relative;
  width: 100%;
  height: 80px;
  padding: 0px calc(~"(100% - 1185px)/2");
  z-index: 1001;
  background-image: url("~@/assets/images/back_ceiling.png");

  .menu_styl {
    .flex-x();
    flex-shrink: 0;
    flex-grow: 1;
    padding: 0 50px;
    font-size: 18px;

    .menu_item {
      cursor: pointer;
    }

    .chooseClass {
      color: @themeColor;
      border-bottom: 3px solid @themeColor;
    }
  }

  .btn_styl {
    .flex-x();

    .btn_search {
      .flex-x(center);
      .solid-btn(104px, 38px, 0, @themeColor, #ffffff);
      margin-right: 10px;

      .icon-ss {
        margin-right: 6px;
      }
    }

    .btn_user {
      .flex-x(center);
      .hollow-btn(104px, 38px, 0, #ffffff, @themeColor, @themeColor);

      .icon-gwzx {
        margin-right: 6px;
      }
    }
  }
}

.head_styl {
  position: relative;
  width: 100%;
  padding: 15px calc(~"(100% - 1185px)/2") 0 calc(~"(100% - 1185px)/2");
  background-color: #ffffff;
  z-index: 1001;
  background-image: url("~@/assets/images/back_image.png");

  .head_top {
    .flex-x(flex-start);
    margin-bottom: 26px;

    .head_right {
      margin-left: 84px;

      .tabs_styl {
        .flex-x();
        width: 450px;

        .tabs_item {
          .flex-x(center);
          flex-shrink: 0;
          padding: 6px 18px;
          font-size: 12px;
          cursor: pointer;
        }

        .choose_item {
          background-color: @themeColor;
          color: #ffffff;
        }
      }

      .search_styl {
        .flex-x(flex-start);

        .input_styl {
          .flex-x(flex-start);

          .input_border {
            width: 430px;
            height: 40px;
            border: 2px solid @themeColor;
          }

          .input_search {
            .flex-x(center);
            width: 110px;
            height: 40px;
            color: #ffffff;
            background-color: @themeColor;
            cursor: pointer;

            .icon-ss {
              margin-right: 6px;
            }
          }
        }

        .buy_styl {
          .flex-x(center);
          .hollow-btn(154px, 40px, 4px, #ffffff, #018fe9, #018fe9);
          margin-left: 12px;

          .icon-gwzx {
            margin-right: 6px;
          }
        }
      }

      .history_styl {
        .flex-x(flex-start);
        width: 710px;
        overflow: hidden;
        margin-top: 4px;
        font-size: 12px;
        color: #aaaaaa;

        .history_item {
          margin-right: 16px;
          cursor: pointer;
        }

        .history_item1 {
          .flex-x(flex-start);
          margin-right: 16px;
          color: #fa6600;
          cursor: pointer;

          .icon-ho {
            margin: -4px 0 0 3px;
          }
        }
      }
    }
  }

  .head_bottom {
    .flex-x();
    min-width: 1185px;
    font-size: 14px;

    .class_btn {
      .solid-btn(200px, 40px, 0, @themeColor, #ffffff);
      .flex-x(flex-start);
      padding: 0 22px;
      font-weight: 400;

      .icon-libiao1 {
        margin-right: 17px;
      }
    }

    .shop_class {
      .flex-x();
      width: 70%;
      overflow: hidden;
      overflow-x: auto;
      font-size: 16px;
      font-weight: 400;
      .hide-scroll();

      .shop_item {
        .flex-x(center, center);
        width: 126px;
        height: 47px;
        flex-shrink: 0;
        cursor: pointer;
      }

      .choose_shopitem {
        background-color: @themeColor;
        color: #ffffff;
      }
    }
  }

  .navbar {
    min-width: 1185px;
    font-size: 14px;
    width: 1185px;
    height: 47px;
    position: relative;

    .navbar_slider {
      position: absolute;
      width: 126px;
      height: 47px;
      left: 0;
      top: 0;
      background-color: #2973e4;
      z-index: 1;
    }

    .bavbar_content {
      width: 1185px;
      min-width: 1185px;
      position: absolute;
      top: 0;
      z-index: 2;
      .flex-x(flex-start, center);
      gap: 40px;

      .bavbar_item {
        width: 126px;
        height: 47px;
        text-align: center;
        line-height: 47px;
        cursor: pointer;
      }
    }
  }

  @{deep} .ivu-input {
    height: calc(~"100% - 4px");
    border: 0;
  }
}
</style>
